<template>
  <div class="">
    <el-dialog title="通行记录" :visible.sync="dialogVisible" width="60%">
      <el-row :gutter="20">
        <el-col :span="6" class="font16">姓名：{{ isData.name }}</el-col>
        <el-col :span="6" class="font16">学号：{{ isData.no }}</el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="8">
          <el-date-picker
            style="width: 100%"
            v-model="formData.times"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入设备名称" v-model="formData.deviceName" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.deviceDirection" clearable placeholder="请选择设备方向">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.entryMode" clearable placeholder="请选择核验方式">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchbtn">查询</el-button>
          <el-button @click="cZbtn">重置</el-button>
        </el-col>
      </el-row>

      <div class="up-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          :isPop="true"
          ref="queryTable"
          :api="getTableServe"
        >
          <template v-slot:time="{ scope }">
            {{ timerChange(scope.row.time) }}
          </template>
          <template v-slot:pic="{ scope }">
            <el-image
              v-if="scope.row.pic"
              style="width: 50px; height: 50px"
              :src="urlpj(scope.row.pic)"
              :preview-src-list="[urlpj(scope.row.pic)]"
            ></el-image>
          </template>
          <template v-slot:entryMode="{ scope }">
            {{
              scope.row.entryMode == 1
                ? '刷脸'
                : scope.row.entryMode == 2
                ? '二维码'
                : scope.row.entryMode == 3
                ? '刷卡'
                : scope.row.entryMode == 4
                ? '刷脸+刷卡'
                : scope.row.entryMode == 5
                ? '刷身份证'
                : scope.row.entryMode == 6
                ? '刷脸+刷身份证'
                : scope.row.entryMode == 7
                ? '刷健康码'
                : scope.row.entryMode == 8
                ? '刷脸'
                : '未知方式'
            }}
          </template>

          <template v-slot:deviceDirection="{ scope }">
            {{
              scope.row.deviceDirection == 0
                ? '无'
                : scope.row.deviceDirection == 1
                ? '进'
                : scope.row.deviceDirection == 2
                ? '出'
                : '未知方向'
            }}
          </template>

          <template v-slot:type="{ scope }">
            {{
              scope.row.personType == 1
                ? '员工'
                : scope.row.personType == 2
                ? '访客'
                : scope.row.personType == 3
                ? '陌生人'
                : scope.row.personType == 4
                ? '非活体'
                : scope.row.personType == 5
                ? '黑名单'
                : '未知类型'
            }}
          </template>
        </QueryTable>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import QueryTable from '@/components/queryTable/index.vue';

import { syspasslist } from '@/api/comment/studentList.js';

export default {
  components: {
    QueryTable
  },
  data() {
    return {
      dialogVisible: false,
      getTableServe: syspasslist,

      //配置文件
      displayContent: {
        height: '40vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {}, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'time',
          label: '抓拍时间',
          width: '160',
          align: 'center',
          sockets: true
        },
        {
          prop: 'pic',
          label: '抓拍图片',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'userName',
          label: '姓名',
          width: '160',
          align: 'center'
        },
        {
          prop: 'no',
          label: '学工号',
          width: '160',
          align: 'center'
        },
        {
          prop: 'deviceName',
          label: '设备名称',
          width: '160',
          align: 'center'
        },
        {
          prop: 'ldid',
          label: '设备ldid',
          width: '160',
          align: 'center'
        },
        {
          prop: 'type',
          label: '人员类型',
          width: '120',
          align: 'center',
          sockets: true
        },
        {
          prop: 'deviceDirection',
          label: '设备方向',
          width: '80',
          align: 'center',
          sockets: true
        },
        {
          prop: 'entryMode',
          label: '核验方式',
          width: '160',
          align: 'center',
          sockets: true
        }
      ],

      options1: [
        {
          value: 0,
          label: '无'
        },
        {
          value: 1,
          label: '进'
        },
        {
          value: 2,
          label: '出'
        }
      ],

      options2: [
        {
          value: 1,
          label: '刷脸'
        },
        {
          value: 2,
          label: '二维码'
        },
        {
          value: 3,
          label: '刷卡'
        },
        {
          value: 4,
          label: '刷脸+刷卡'
        },
        {
          value: 5,
          label: '刷身份证'
        },
        {
          value: 6,
          label: '刷脸+刷身份证'
        },
        {
          value: 7,
          label: '刷健康码'
        },
        {
          value: 8,
          label: '刷脸'
        }
      ],

      isData: {} //所有数据
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //打开弹窗
    open(data) {
      this.formData = {};
      this.dialogVisible = true; //打开弹窗
      this.isData = data;

      this.formData.no = data.no; //学工号

      const todayStart = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      const todayEnd = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
      this.formData.times = [todayStart, todayEnd];

      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //搜索按钮
    searchbtn() {
      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //重置按钮
    cZbtn() {
      const todayStart = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      const todayEnd = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');

      this.formData = {
        no: this.isData.no,
        times: [todayStart, todayEnd]
      };

      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    urlpj(data) {
      if (data) {
        return `${this.url}/getImg/pic/${data}`;
      }
    },
    timerChange(data) {
      if (data) {
        return moment.utc(data).format('YYYY-MM-DD HH:mm:ss');
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.font16 {
  font-size: 16px;
}

.up-table {
  margin-top: 20px;
}
</style>
